<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>配置管理系统 - any4any</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/a4a.css">
</head>
<body class="layui-layout-body config-admin-page">
    <div class="layui-layout layui-layout-admin">
        <!-- 头部 -->
        <div class="layui-header">
            <div class="layui-logo">
                <i class="layui-icon layui-icon-set"></i>
                配置管理系统
            </div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;" id="systemStatus">
                        <i class="layui-icon layui-icon-ok-circle" style="color: #5FB878;"></i>
                        <span id="statusText">运行正常</span>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="reloadAllConfig">
                        <i class="layui-icon layui-icon-refresh"></i>
                        重载配置
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="restartService">
                        <i class="layui-icon layui-icon-refresh-1"></i>
                        重启服务
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="/index/">
                        <i class="layui-icon layui-icon-home"></i>
                        返回首页
                    </a>
                </li>
            </ul>
        </div>

        <!-- 侧边栏 -->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree" lay-filter="configGroupTree" id="configGroupTree">
                    <!-- 动态加载配置分组 -->
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body">
            <div class="layui-fluid config-main-content">
                <!-- 内容区域 -->
                <div id="contentArea">
                    <!-- 配置概览页 -->
                    <div id="overviewPage" class="config-page">
                        <!-- 系统状态卡片 -->
                        <div class="layui-row layui-col-space15 config-overview-card">
                            <div class="layui-col-md3">
                                <div class="layui-card">
                                    <div class="layui-card-header">
                                        <i class="layui-icon layui-icon-chart"></i>
                                        系统状态
                                    </div>
                                    <div class="layui-card-body">
                                        <div id="systemStatusCard" class="status-card">
                                            <div class="status-indicator healthy"></div>
                                            <div class="status-text">
                                                <div class="status-title">系统运行状态</div>
                                                <div class="status-desc" id="systemStatusDesc">运行正常</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-card">
                                    <div class="layui-card-header">
                                        <i class="layui-icon layui-icon-tabs"></i>
                                        配置统计
                                    </div>
                                    <div class="layui-card-body">
                                        <div class="stat-item">
                                            <span class="stat-label">配置总数</span>
                                            <span class="stat-value" id="totalConfigs">--</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="stat-label">待重载</span>
                                            <span class="stat-value" id="pendingReload">--</span>
                                        </div>
                                        <div class="stat-item">
                                            <span class="stat-label">敏感配置</span>
                                            <span class="stat-value" id="sensitiveConfigs">--</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-card">
                                    <div class="layui-card-header">
                                        <i class="layui-icon layui-icon-time"></i>
                                        最近更新
                                    </div>
                                    <div class="layui-card-body">
                                        <div class="update-info">
                                            <div class="update-label">最后更新时间</div>
                                            <div class="update-time" id="lastUpdateTime">--</div>
                                        </div>
                                        <div class="update-info">
                                            <div class="update-label">缓存状态</div>
                                            <div class="cache-status" id="cacheStatus">--</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md3">
                                <div class="layui-card">
                                    <div class="layui-card-header">
                                        <i class="layui-icon layui-icon-fire"></i>
                                        快速操作
                                    </div>
                                    <div class="layui-card-body">
                                        <div class="quick-actions">
                                            <button class="layui-btn layui-btn-sm layui-btn-normal" id="createBackupBtn">
                                                <i class="layui-icon layui-icon-download-circle"></i>
                                                创建备份
                                            </button>
                                            <button class="layui-btn layui-btn-sm layui-btn-warm" id="exportConfigsBtn">
                                                <i class="layui-icon layui-icon-export"></i>
                                                导出配置
                                            </button>
                                            <button class="layui-btn layui-btn-sm" id="viewHistoryBtn">
                                                <i class="layui-icon layui-icon-log"></i>
                                                查看历史
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 最近变更记录 -->
                        <div class="layui-card" style="margin-top: 15px;">
                            <div class="layui-card-header">
                                <span>最近变更记录</span>
                                <div class="card-actions">
                                    <button class="layui-btn layui-btn-sm" id="refreshHistoryBtn">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                    </button>
                                    <a href="javascript:;" id="viewAllHistoryBtn" class="layui-btn layui-btn-sm layui-btn-primary">
                                        查看全部
                                    </a>
                                </div>
                            </div>
                            <div class="layui-card-body">
                                <table class="layui-table" lay-skin="nob" id="recentChangesTable">
                                    <colgroup>
                                        <col width="20%">
                                        <col width="25%">
                                        <col width="15%">
                                        <col width="20%">
                                        <col width="20%">
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th>配置项</th>
                                            <th>变更内容</th>
                                            <th>操作人</th>
                                            <th>变更原因</th>
                                            <th>时间</th>
                                        </tr>
                                    </thead>
                                    <tbody id="recentChangesBody">
                                        <!-- 动态加载最近变更 -->
                                    </tbody>
                                </table>
                                <div id="noRecentChanges" class="empty-state" style="display: none;">
                                    <p>暂无变更记录</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 配置编辑页 -->
                    <div id="configEditPage" class="config-page" style="display: none;">
                        <!-- 工具栏 -->
                        <div class="config-toolbar">
                            <div class="layui-form">
                                <div class="layui-form-item" style="margin-bottom: 0;">
                                    <div class="layui-inline">
                                        <input type="text" placeholder="搜索配置项..." class="layui-input" id="configSearchInput" style="width: 300px;">
                                    </div>
                                    <div class="layui-inline">
                                        <select id="categoryFilter" lay-filter="categoryFilter">
                                            <option value="">全部分类</option>
                                        </select>
                                    </div>
                                    <div class="layui-inline">
                                        <button class="layui-btn" id="searchBtn">
                                            <i class="layui-icon layui-icon-search"></i>
                                            搜索
                                        </button>
                                        <button class="layui-btn layui-btn-primary" id="resetSearchBtn">
                                            <i class="layui-icon layui-icon-refresh"></i>
                                            重置
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 配置表单 -->
                        <form class="layui-form config-form" lay-filter="configForm" id="configForm">
                            <div class="config-items-container" id="configItemsContainer">
                                <!-- 动态加载配置项 -->
                            </div>

                            <!-- 操作按钮 -->
                            <div class="config-form-actions layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveConfigBtn">
                                        <i class="layui-icon layui-icon-ok"></i>
                                        保存更改
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-primary" id="resetConfigBtn">
                                        <i class="layui-icon layui-icon-refresh"></i>
                                        重置
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-warm" id="validateAllBtn">
                                        <i class="layui-icon layui-icon-survey"></i>
                                        验证配置
                                    </button>
                                    <button type="button" class="layui-btn layui-btn-normal" id="exportGroupBtn">
                                        <i class="layui-icon layui-icon-export"></i>
                                        导出分组
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- 配置历史页 -->
                    <div id="configHistoryPage" class="config-page" style="display: none;">
                        <!-- 历史记录筛选 -->
                        <div class="history-toolbar">
                            <div class="layui-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">配置项</label>
                                        <div class="layui-input-inline">
                                            <input type="text" placeholder="输入配置键名" class="layui-input" id="historyConfigKey" style="width: 200px;">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label">变更类型</label>
                                        <div class="layui-input-inline">
                                            <select id="historyChangeType" lay-filter="historyChangeType">
                                                <option value="">全部类型</option>
                                                <option value="create">创建</option>
                                                <option value="update">更新</option>
                                                <option value="delete">删除</option>
                                                <option value="reload">重载</option>
                                                <option value="restart">重启</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <button class="layui-btn" id="searchHistoryBtn">
                                            <i class="layui-icon layui-icon-search"></i>
                                            查询
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- 历史记录表格 -->
                        <table class="layui-table" id="historyTable" lay-filter="historyTable">
                            <colgroup>
                                <col width="15%">
                                <col width="20%">
                                <col width="15%">
                                <col width="10%">
                                <col width="15%">
                                <col width="15%">
                                <col width="10%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>配置项</th>
                                    <th>变更类型</th>
                                    <th>操作人</th>
                                    <th>变更原因</th>
                                    <th>变更内容</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="historyBody">
                                <!-- 动态加载历史记录 -->
                            </tbody>
                        </table>

                        <!-- 分页 -->
                        <div id="historyPagination"></div>
                    </div>

                    <!-- 备份管理页 -->
                    <div id="backupManagePage" class="config-page" style="display: none;">
                        <!-- 备份操作栏 -->
                        <div class="backup-toolbar">
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn-normal" id="createNewBackupBtn">
                                    <i class="layui-icon layui-icon-add-1"></i>
                                    创建备份
                                </button>
                                <button class="layui-btn layui-btn-primary" id="cleanupOldBackupsBtn">
                                    <i class="layui-icon layui-icon-delete"></i>
                                    清理旧备份
                                </button>
                            </div>
                        </div>

                        <!-- 备份列表 -->
                        <table class="layui-table" id="backupTable" lay-filter="backupTable">
                            <colgroup>
                                <col width="25%">
                                <col width="15%">
                                <col width="15%">
                                <col width="15%">
                                <col width="15%">
                                <col width="15%">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>备份名称</th>
                                    <th>创建时间</th>
                                    <th>创建人</th>
                                    <th>文件大小</th>
                                    <th>类型</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="backupBody">
                                <!-- 动态加载备份列表 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 备份创建对话框 -->
    <div id="createBackupDialog" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">备份名称</label>
                <div class="layui-input-block">
                    <input type="text" name="backupName" placeholder="请输入备份名称" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备份描述</label>
                <div class="layui-input-block">
                    <textarea name="backupDescription" placeholder="请输入备份描述（可选）" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>

    <!-- 配置变更对话框 -->
    <div id="configChangeDialog" style="display: none;">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">配置项</label>
                <div class="layui-input-block">
                    <input type="text" id="changeConfigKey" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">当前值</label>
                <div class="layui-input-block">
                    <input type="text" id="changeCurrentValue" class="layui-input" readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新值</label>
                <div class="layui-input-block">
                    <input type="text" id="changeNewValue" class="layui-input" required>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">变更原因</label>
                <div class="layui-input-block">
                    <textarea id="changeReason" placeholder="请输入变更原因（可选）" class="layui-textarea"></textarea>
                </div>
            </div>
        </form>
    </div>

    <!-- 确认对话框模板 -->
    <script type="text/html" id="confirmDialogTemplate">
        <div class="confirm-dialog">
            <div class="confirm-icon">
                <i class="layui-icon layui-icon-warning"></i>
            </div>
            <div class="confirm-content">
                <h3>{{ d.title }}</h3>
                <p>{{ d.content }}</p>
            </div>
        </div>
    </script>

    <script src="/static/layui/layui.js"></script>
    <script>
        // 全局配置
        window.ConfigAdmin = {
            apiBase: '/v1/admin/config',
            currentGroup: null,
            currentPage: 'overview',
            originalConfigData: {},
            modifiedConfigs: {},
            hasUnsavedChanges: false
        };
    </script>
    <script src="/static/js/config-admin.js"></script>

    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-content">
            <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-size: 32px; color: #16baaa; margin-bottom: 15px;"></i>
            <div id="loadingText" style="color: #666;">正在处理...</div>
        </div>
    </div>
</body>
</html>